import React,{ Component } from 'react'

import {
    UnderWearContainer,
    UnderWearUl,
    UnderWearLi,
    UnderWearBox
}from './UnderwearStyle'

import BScroll from 'better-scroll'

import getFoodHealth from 'utils/tuan-wys/food-health'
import actionCreators from 'store/tuan-wys/food-health/actionCreators'

const Item = ( props ) => {
    return (
        <UnderWearLi>
            <div className="shopMessage">
                <img src=  {props.image} alt=""  className="img"/>
                <div className="discuss"> {props.buyer_number_text} </div>
            </div>
            <div className="shopRecommend">
                <span className="goods-num">{props.group_name_tag}</span>
                {props.short_name}
            </div>
            <div className="good-foot">
                <div className="price">
                    <span className="ct-price">
                        { props.jumei_price}
                    </span>
                    <span className="jm-price">
                        { props.single_price}
                    </span>
                </div>
                <div className="time-right">
                    去开团
                </div>
            </div>
        </UnderWearLi>
    )
}

class UnderWear extends Component{

    componentDidMount() {
        this.props.get_food_health()
        this.scroll = new BScroll( this.box,{
            mouseWheel: {
                speed: 5,
                invert: false,
                easeTime: 300
               },
               pullUpLoad: {
                threshold: 50 //开启上拉事件
            },
               click: true,
        })

    }

    renderItem = () => {
        return this.props.food_health && 
        this.props.food_health.data.map( item => <Item
            { ...item } key = { item.item_id }
            />)
    }

    render () {
        return (
            <UnderWearContainer>
                <UnderWearBox ref = {el => this.box = el}>
                <UnderWearUl>
                    { this.renderItem()}
                </UnderWearUl>
                </UnderWearBox>
            </UnderWearContainer>
        )
    }

    componentDidUpdate() {
        console.log( this.props.food_health)
    }
    

    
}

export default getFoodHealth({
    actionCreators,
    UIComponent:UnderWear,
    type:'food_health'
    
})



//这里的type是总reducers中的